<template>
    <Pop :show="account.popRegisterSuccess" :is-title="false" :is-close="false" @close="onClose">
        <div class="share">
            <JShare>
                <img class="shareIcon" src="./imgs/share.png" />
            </JShare>
        </div>
        <div class="img-box">
            <img class="inv-img" :src="Gift" />
            <!-- <Vue3Lottie :animationData="animationData" :height="200" :width="200" /> -->
        </div>
        <div class="tip1 c-title-4">
            {{ $t("message.RegisterSuccess.all") }}
        </div>
        <div class="d-flex justify-center r-btns">
            <v-btn class="me-4 submit-btn" color="primary" @click="onGet">
                <!-- 去領取  -->
                {{ $t("message.RegisterSuccess.yes") }}
            </v-btn>
        </div>
    </Pop>
</template>

<script lang="ts" setup>
import Pop from "@/components/pop/index.vue";
import JShare from "@/components/j-share/index.vue";
import { toast } from "@/components/toast/toast";
import { useAccount } from "@/stores/account";
// import { Vue3Lottie } from "vue3-lottie";
import Gift from "@/assets/register_ gift.png";
// import lottie from "vue-lottie";
// console.log("lottie", lottie)
import animationData from "./wOU04UW84s.json";
import JEnergy from "@/components/j-energy/index.vue"
import { computed, ref } from "vue";
import { useRouter } from "vue-router";
import { useUser } from "@/stores/user";
import { Yanim } from "@/components/y-anim/script/yanim";
import { callObj } from "@/comm/loginSucCall";

const account = useAccount();
const router = useRouter();
const user = useUser();

const energy = computed(() => {
    let item = user.missions?.find(i => i.action == "REGISTER_COMPLETE");
    return item?.energyAmount;
});

const onClose = () => {
    account.changePopRegisterSuccess(false);
};

const onGet = () => {
    onClose();
    callObj.callfun();
    Yanim.isActive = true;
    Yanim.active();
    user.getRegisterEnergy();
    localStorage.setItem("once", "1");
    if(location.href.includes("/reward") == false){
        router.push("/reward");
    }
};

const openShare = () => {
    account.changePopRegisterSuccess(false);
    account.changePopShare(true);
};
</script>

<style lang="less" scoped>
@import url("./index.less");

.share {
    position: absolute;
    top: 5%;
    right: 5%;
    // background-color: red;
}

.img-box {
    width: 100%;
    text-align: center;
    margin: 20px 0;
}

.inv-img {
    width: 200px;
    height: 200px;
    object-fit: contain;
}

.tip1 {
    // font-size: 18px;
    color: #fff;
    margin-bottom: var(--space);
    text-align: center;
    max-width: 300px;
}

.tip2 {
    font-size: 18px;
    margin-bottom: 40px;
}

.tip3 {
    font-size: 14px;
    text-align: center;
    color: var(--sub);
}

.submit-btn {
    width: 100%;
    margin: 0 !important;

    &.quits {
        margin-right: 30px !important;
    }
}

.m-color {
    color: var(--main);
}

.pit {
    cursor: pointer;
}

.r-btns {
    margin: auto;
}
</style>
